<template>
    <div class="shops">
      <div class="left">
        <img :src="businessImg" alt="shopImg" mode="aspectFit">
      </div>
      <div class="right">
        <p class="shopName">{{name}}</p>
        <p class="shopInfo"><span class="adr1">{{city}}</span><span class="adr2">{{area}}</span><span class="km">10.8km</span></p>
        <div class="meal">
          <img src="../../static/images/mealIco.png" alt="meal" mode="aspectFit">
          <span>{{briefly}}</span>
        </div>
      </div>
    </div>
</template>
<script>
  export default {
    props: ['businessImg', 'name', 'city', 'area', 'briefly']
  }
</script>
<style scoped lang="scss">
  .shops{
    height: 185rpx;
    margin: 33rpx 45rpx 0 45rpx;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    display: cloumn;
    padding: 33rpx 0;
    border-radius: 10rpx;
    box-shadow: 0 3rpx 5rpx 1rpx #d0d0d0;
    .left{
      float: left;
      width: 185rpx;
      height: 185rpx;
      border-right: 1rpx solid #ccc;
      overflow: hidden;
      margin-left: 40rpx;
      text-align: center;
      img{
        width: 140rpx;
        height: 140rpx;
        margin-top: 33rpx;
      }
    }
    .right{
      margin-left: 265rpx;
      height: 185rpx;
      .shopName{
        font-size: 36rpx;
        color: #333333;
        font-weight: bold;
      }
      .shopInfo{
        font-size: 24rpx;
        color: #666666;
        margin-top: 20rpx;
        margin-right: 23rpx;
        padding-bottom: 20rpx;
        border-bottom: 1px dashed #5beec5;
        .adr2{
          margin-left: 30rpx;
        }
        .km{
          float: right;
        }
      }
      .meal{
        height: 42rpx;
        margin-top: 14rpx;
        color: #999999;
        font-size: 22rpx;
        line-height: 42rpx;
        img{
          height: 42rpx;
          width: 90rpx;
          float: left;
        }
        span{
          margin-left: 10rpx;
          overflow:hidden;
          white-space:nowrap;
          text-overflow:ellipsis;
          display: inline-block;
          width: 200rpx;
        }
      }
    }
  }

</style>
